import { DataQueryDetailPage } from "@pkg";
import { getAddress } from "@/server/dict";
import { htmlDoc } from "./doc-html";
type FType = {
	name?: string;
	ipt?: string;
	map?: string;
	map1?: string;
	money?: number;
	time?: [number, number];
	select?: number;
	switch?: string;
	image?: string | string[];
	editor?: string;
	cascader?: any[];
	file?: string;
	uploadFile?: string;
	sg?: string;
};

export class FDP extends DataQueryDetailPage<{ form: FType }, any> {
	constructor() {
		super("FDP", {
			mounted() {},
		});
		const f = super.initForm("form", {
			layout: "vertical",
			labelWidth: "80px",
			type: "edit",
		});
		f.setLineNum(2);
		f.addFormItem({
			key: "ipt",
			component: "Input",
			label: "输入框",
			value: "",
			rule: "RequiredRule",
			width: "45%",
		});
		f.addFormItem({
			key: "name",
			component: "InputGroup",
			label: "名字",
			value: "",
			rule: "RequiredRule",
			placeholder: "请填写名字",
			width: "45%",
			conf: {
				maxCount: 10,
				strict: true,
			},
		});
		f.addFormItem({
			component: "InputNumber",
			label: "金额",
			width: "45%",
			value: "",
			key: "money",
			rule: "RequiredRule",
			placeholder: "请填写金额",
		});
		f.addFormItem({
			key: "time",
			component: "DatePicker",
			width: "45%",
			label: "时间",
			rule: "RequiredRule",
			placeholder: "请选择时间",
			value: (1693982609791).toString(),
			conf: {
				type: "datetime",
			},
		});
		f.addFormItem({
			key: "file",
			"component": "InputGroup",
			label: "测试",
			value: "",
			conf: {},
		});
		f.addFormItem({
			key: "uploadFile",
			"component": "UploadFile",
			placeholder: "请上传文件",
			label: "测试",
			value: "",
			rule: "RequiredRule",
			conf: {},
		});
		f.addFormItem({
			key: "sg",
			component: "SelectGroup",
			width: "45%",
			label: "tree",
			// disabled: true,
			value: "",
			placeholder: "xxxxxxx",
			conf: {
				lazy: {
					async lazyLoad(node, resolve) {
						const result = await getAddress(node?.id as []);
						resolve({
							value: result,
						});
					},
				},
				valueKeys: "object",
				change(_val, _value) {
					console.log(_val, _value, "_val, _value");
				},
			},
		});

		// f.addFormItem({
		// 	component: "Cascader",
		// 	key: "cascader",
		// 	width: "45%",
		// 	label: "级联",
		// 	value: [1, 11],
		// 	rule: "RequiredRule",
		// 	placeholder: "请选择级联",
		// 	conf: {
		// 		filterable: true,
		// 		change(value, cascaValue) {
		// 			console.log(value, cascaValue, "value, cascaValuevalue, cascaValue");
		// 		},
		// 		// lazy: {
		// 		// 	lazy: true,
		// 		// 	lazyLoad(node, resolve) {
		// 		// 		const list = Array.from({ length: 3 }, () => ({
		// 		// 			label: "opt_label" + node.level + "__" + id++,
		// 		// 			value: id,
		// 		// 			leaf: node.level >= 2,
		// 		// 		}));
		// 		// 		resolve(list);
		// 		// 	},
		// 		// },
		// 		appendButton: {},
		// 	},
		// });
		// f.addFormItem({
		// 	key: "select",
		// 	component: "Select",
		// 	label: "下拉选择",
		// 	width: "45%",
		// 	placeholder: "请选择下拉选择",
		// 	value: "2",
		// 	conf: {
		// 		options: () =>
		// 			Promise.resolve([
		// 				{ label: "zhangsan", value: "1" },
		// 				{ label: "lisi", value: "2" },
		// 				{ label: "wangwu", value: "3" },
		// 			]),
		// 	},
		// });
		// f.addFormItem({
		// 	key: "switch",
		// 	component: "Switch",
		// 	label: "切换",
		// 	rule: "RequiredRule",
		// 	placeholder: "请选择切换",
		// 	width: "45%",
		// 	value: "Y",
		// 	conf: {
		// 		active: {
		// 			label: "开",
		// 			value: "Y",
		// 		},
		// 		inactive: {
		// 			label: "关",
		// 			value: "N",
		// 		},
		// 		change(option) {
		// 			console.log(option, "sfasf");
		// 		},
		// 	},
		// });
		// f.addFormItem({
		// 	component: "UploadImg",
		// 	label: "图片",
		// 	rule: "RequiredRule",
		// 	placeholder: "请选择图片",
		// 	value: [
		// 		// "http://192.168.3.201:8888/file/download/KTmNSbzeTu2yhqfjyx8zXeALd6MeUaUL1",
		// 		// "https://img2.baidu.com/it/u=646973818,4287225503&fm=253&fmt=auto&app=138&f=JPEG?w=750&h=500",
		// 		// "http://192.168.3.201:8888/file/download/KTmNSbzeTu2yhqfjyx8zXeALd6MeUaUL",
		// 		// "http://192.168.3.201:8888/file/download/KTmNSbzeTu2yhqfjyx8zXeALd6MeUaUL",
		// 		// "http://192.168.3.201:8888/file/download/KTmNSbzeTu2yhqfjyx8zXeALd6MeUaUL",
		// 		// "http://192.168.3.201:8888/file/download/KTmNSbzeTu2yhqfjyx8zXeALd6MeUaUL",
		// 		// "http://192.168.3.201:8888/file/download/KTmNSbzeTu2yhqfjyx8zXeALd6MeUaUL",
		// 		// "http://192.168.3.201:8888/file/download/KTmNSbzeTu2yhqfjyx8zXeALd6MeUaUL",
		// 		// "http://192.168.3.201:8888/file/download/KTmNSbzeTu2yhqfjyx8zXeALd6MeUaUL",
		// 	],
		// 	key: "image",
		// });
		// f.addFormItem({
		// 	component: "UploadFile",
		// 	key: "file",
		// 	label: "ssss1s",
		// 	value: "wwwwwwwwwwwwwww",
		// 	conf: {
		// 		showIcon: true,
		// 		optionalType: [".doc", ".docx", ".ppt"],
		// 	},
		// });
		f.addFormItem({
			component: "Editor",
			label: "富文本",
			rule: "RequiredRule",
			width: "100%",
			value: "",
			key: "editor",
			placeholder: "请选择富文本",
			conf: {
				async downloadStream() {
					return htmlDoc;
					// return "<img src='http://192.168.3.201:8888/file/download/KTmNSbzeTu2yhqfjyx8zXeALd6MeUaUL'></img> ";
				},
				uploadImage() {
					return Promise.resolve({});
				},
			},
		});

		f.addFormButton({
			label: "表单校验",
			key: "btn1",
			click() {
				console.log(f.getFormValue());

				f.verify();
			},
		});
	}
}

let id = 0;
